<template>
  <view class="receipt-container">
    <!-- 订单状态头部 -->
    <view class="status-header">
      <view class="status-icon">
        <view class="status-icon-text">📋</view>
      </view>
      <view class="status-info">
        <text class="status-title">{{getStatusTitle()}}</text>
        <text class="status-desc">{{getStatusDesc()}}</text>
      </view>
    </view>
    
    <!-- 订单信息卡片 -->
    <view class="order-card">
      <view class="card-header">
        <text class="order-title">订单信息</text>
        <text class="order-number">订单号：{{orderInfo.orderNo}}</text>
      </view>
      
      <view class="order-details">
        <view class="detail-item">
          <text class="label">商品名称：</text>
          <text class="value">{{orderInfo.goodsName}}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">订单金额：</text>
          <text class="amount">¥{{orderInfo.totalAmount}}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">下单时间：</text>
          <text class="value">{{orderInfo.createTime}}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">付款方式：</text>
          <text class="payment-method">线下付款</text>
        </view>
        
        <view class="detail-item" v-if="orderInfo.remark">
          <text class="label">备注信息：</text>
          <text class="value">{{orderInfo.remark}}</text>
        </view>
      </view>
    </view>
    
    <!-- 收货地址信息 -->
    <view class="address-card">
      <view class="card-header">
        <text class="card-title">收货地址</text>
      </view>
      
      <view class="address-info">
        <view class="contact-info">
          <text class="name">{{orderInfo.receiverName}}</text>
          <text class="phone">{{orderInfo.receiverPhone}}</text>
        </view>
        <text class="address">{{orderInfo.receiverAddress}}</text>
      </view>
    </view>
    
    <!-- 付款说明 -->
    <view class="payment-notice">
      <view class="notice-header">
        <view class="notice-icon">💡</view>
        <text>付款说明</text>
      </view>
      
      <view class="notice-content">
        <text class="notice-item">• 请您在收到商品后，确认商品无误再进行付款</text>
        <text class="notice-item">• 支持现金付款或移动支付（微信/支付宝）</text>
        <text class="notice-item">• 付款后请点击下方"确认已付款"按钮</text>
        <text class="notice-item">• 如有问题请及时联系客服：400-888-8888</text>
      </view>
    </view>
    
    <!-- 付款确认区域 -->
    <view class="confirm-section" v-if="orderInfo.status === 'pending'">
      <view class="confirm-header">
        <text>请确认您已完成线下付款</text>
      </view>
      
      <view class="payment-options">
        <view class="option-item" 
              :class="{active: selectedPayMethod === 'cash'}"
              @click="selectPayMethod('cash')">
          <view class="option-icon">💰</view>
          <text>现金付款</text>
        </view>
        
        <view class="option-item" 
              :class="{active: selectedPayMethod === 'wechat'}"
              @click="selectPayMethod('wechat')">
          <view class="option-icon">💚</view>
          <text>微信付款</text>
        </view>
        
        <view class="option-item" 
              :class="{active: selectedPayMethod === 'alipay'}"
              @click="selectPayMethod('alipay')">
          <view class="option-icon">💙</view>
          <text>支付宝付款</text>
        </view>
      </view>
      
      <view class="amount-confirm">
        <text class="confirm-text">确认付款金额：</text>
        <text class="confirm-amount">¥{{orderInfo.totalAmount}}</text>
      </view>
      
      <!-- 付款证明上传 -->
      <view class="payment-proof">
        <view class="proof-header">
          <text class="proof-title">上传付款证明</text>
          <text class="proof-desc">（选填）上传付款截图或照片</text>
        </view>
        
        <view class="proof-upload">
          <view class="upload-list">
            <view class="upload-item" v-for="(item, index) in proofImages" :key="index">
              <image 
                :src="item.url" 
                @click="previewImage(item.url)"
                @error="handleImageError"
                mode="aspectFill"
              />
              <view class="delete-btn" @click="deleteProof(index)">×</view>
            </view>
            
            <view class="upload-btn" @click="chooseImage" v-if="proofImages.length < 3">
              <view class="upload-icon">📷</view>
              <text>上传图片</text>
            </view>
            
            <view class="test-btn" @click="addTestImage" v-if="proofImages.length < 3">
              <view class="test-icon">🧪</view>
              <text>测试图片</text>
            </view>
          </view>
          
          <view class="upload-tips">
            <text>• 最多可上传3张图片</text>
            <text>• 支持jpg、png格式，单张不超过2MB</text>
            <text>• 建议上传清晰的付款截图或转账记录</text>
            <text>• 图片将在选择后立即显示</text>
          </view>
        </view>
        
        <!-- 付款备注 -->
        <view class="payment-note">
          <text class="note-label">付款备注：</text>
          <textarea 
            class="note-input" 
            v-model="paymentNote"
            placeholder="请输入付款相关备注信息（选填）"
            maxlength="200"
          />
          <view class="note-count">{{paymentNote.length}}/200</view>
        </view>
      </view>
      
      <button class="confirm-btn" 
              :disabled="!selectedPayMethod"
              @click="confirmPayment">
        确认已付款
      </button>
    </view>
    
    <!-- 已付款状态 -->
    <view class="payment-success" v-if="orderInfo.status === 'paid'">
      <view class="success-icon">✅</view>
      <text class="success-text">付款确认成功</text>
      <text class="success-desc">感谢您的购买，我们将尽快为您安排发货</text>
      
      <view class="success-info">
        <text>付款方式：{{getPayMethodText()}}</text>
        <text>确认时间：{{orderInfo.paidTime}}</text>
        <text v-if="orderInfo.paymentNote">付款备注：{{orderInfo.paymentNote}}</text>
      </view>
      
      <!-- 付款证明展示 -->
      <view class="proof-display" v-if="orderInfo.proofImages && orderInfo.proofImages.length > 0">
        <view class="proof-title">付款证明</view>
        <view class="proof-images">
          <image 
            v-for="(item, index) in orderInfo.proofImages" 
            :key="index"
            :src="item.url" 
            @click="previewImage(item.url)"
            @error="handleImageError"
            mode="aspectFill"
            class="proof-image"
          />
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="action-btn secondary" @click="contactService">联系客服</button>
      <button class="action-btn primary" @click="viewOrderDetail">查看订单详情</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedPayMethod: '',
      proofImages: [], // 付款证明图片
      paymentNote: '', // 付款备注
      orderInfo: {
        orderNo: '202401150001',
        goodsName: '时尚潮流T恤 夏季新品 白色 M码',
        totalAmount: '89.00',
        createTime: '2024-01-15 14:30:25',
        status: 'pending', // pending: 待付款, paid: 已付款
        payMethod: '',
        paidTime: '',
        remark: '请尽快发货',
        receiverName: '张三',
        receiverPhone: '138****8888',
        receiverAddress: '北京市朝阳区某某街道某某小区1号楼2单元301室'
      }
    }
  },
  
  onLoad(options) {
    // 从路由参数获取订单信息
    if (options.orderNo) {
      this.loadOrderInfo(options.orderNo)
    }
  },
  
  methods: {
    loadOrderInfo(orderNo) {
      // 这里应该调用API获取订单信息
      uni.showLoading({ title: '加载中...' })
      
      setTimeout(() => {
        uni.hideLoading()
        // 模拟获取到的订单数据
      }, 1000)
    },
    
    getStatusTitle() {
      const statusMap = {
        pending: '等待付款确认',
        paid: '付款已确认'
      }
      return statusMap[this.orderInfo.status] || '未知状态'
    },
    
    getStatusDesc() {
      const descMap = {
        pending: '请确认您已完成线下付款，然后点击确认按钮',
        paid: '您的付款已确认，订单将进入下一步处理流程'
      }
      return descMap[this.orderInfo.status] || ''
    },
    
    selectPayMethod(method) {
      this.selectedPayMethod = method
    },
    
    getPayMethodText() {
      const methodMap = {
        cash: '现金付款',
        wechat: '微信付款',
        alipay: '支付宝付款'
      }
      return methodMap[this.orderInfo.payMethod] || '线下付款'
    },
    
    confirmPayment() {
      if (!this.selectedPayMethod) {
        uni.showToast({
          title: '请选择付款方式',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '确认付款',
        content: `请确认您已通过${this.getPayMethodText()}完成了¥${this.orderInfo.totalAmount}的付款？`,
        success: (res) => {
          if (res.confirm) {
            this.submitPaymentConfirm()
          }
        }
      })
    },
    
    submitPaymentConfirm() {
      if (!this.paymentData.amount || !this.paymentData.transactionId) {
        uni.showToast({
          title: '请填写完整的付款信息',
          icon: 'none'
        })
        return
      }

      const submitData = {
        orderId: this.orderId,
        amount: this.paymentData.amount,
        transactionId: this.paymentData.transactionId,
        paymentMethod: this.paymentData.paymentMethod,
        paymentTime: this.paymentData.paymentTime,
        images: this.paymentData.images,
        remark: this.paymentData.remark
      }

      // 提交付款确认
      uni.showToast({
        title: '提交成功，等待审核',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },
    
    chooseImage() {
      uni.chooseImage({
        count: 3,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.paymentData.images.push(...res.tempFilePaths)
        },
        fail: (err) => {
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          })
        }
      })
    },
    
    previewImage(url) {
      let urls = []
      
      // 根据订单状态获取图片列表
      if (this.orderInfo.status === 'paid' && this.orderInfo.proofImages) {
        urls = this.orderInfo.proofImages.map(item => item.url)
      } else {
        urls = this.proofImages.map(item => item.url)
      }
      
      uni.previewImage({
        current: url,
        urls: urls
      })
    },
    
    deleteProof(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张付款证明吗？',
        success: (res) => {
          if (res.confirm) {
            this.proofImages.splice(index, 1)
          }
        }
      })
    },
    
    handleImageError(e) {
      // 图片加载失败处理
    },
    
    addTestImage() {
      // 添加一个测试用的base64图片
      const testImage = ''
      
      this.proofImages.push({
        url: testImage,
        size: 1024
      })
      
      uni.showToast({
        title: '已添加测试图片',
        icon: 'success',
        duration: 1500
      })
    },
    
    contactService() {
      uni.showModal({
        title: '客服联系方式',
        content: '客服电话：400-888-8888\n工作时间：9:00-18:00',
        showCancel: false
      })
    },
    
    viewOrderDetail() {
      uni.navigateTo({
        url: `/pages/order/detail?orderNo=${this.orderInfo.orderNo}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.receipt-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.status-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx;
  display: flex;
  align-items: center;
  
  .status-icon {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 40rpx;
    
    .status-icon-text {
      font-size: 48rpx;
    }
  }
  
  .status-info {
    flex: 1;
    
    .status-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .status-desc {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.4;
    }
  }
}

.order-card, .address-card, .payment-notice {
  background-color: #ffffff;
  margin: 20rpx 40rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  .order-title, .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .order-number {
    font-size: 26rpx;
    color: #667eea;
  }
}

.order-details {
  .detail-item {
    display: flex;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      width: 180rpx;
      font-size: 28rpx;
      color: #666666;
      flex-shrink: 0;
    }
    
    .value {
      font-size: 28rpx;
      color: #333333;
      flex: 1;
    }
    
    .amount {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff6b35;
      flex: 1;
    }
    
    .payment-method {
      font-size: 28rpx;
      color: #667eea;
      font-weight: bold;
      flex: 1;
    }
  }
}

.address-info {
  .contact-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;
    
    .name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
    }
    
    .phone {
      font-size: 28rpx;
      color: #667eea;
    }
  }
  
  .address {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.5;
  }
}

.payment-notice {
  .notice-header {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;
    
    .notice-icon {
      font-size: 32rpx;
      margin-right: 15rpx;
    }
    
    text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
    }
  }
  
  .notice-content {
    .notice-item {
      display: block;
      font-size: 26rpx;
      color: #666666;
      line-height: 1.6;
      margin-bottom: 12rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  .proof-display {
    margin-top: 30rpx;
    
    .proof-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20rpx;
    }
    
    .proof-images {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
      
      .proof-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        object-fit: cover;
      }
    }
  }
}

.confirm-section {
  background-color: #ffffff;
  margin: 20rpx 40rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .confirm-header {
    text-align: center;
    margin-bottom: 40rpx;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }
  
  .payment-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
    
    .option-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      margin: 0 10rpx;
      
      &.active {
        border-color: #667eea;
        background-color: rgba(102, 126, 234, 0.05);
      }
      
      .option-icon {
        font-size: 60rpx;
        margin-bottom: 15rpx;
      }
      
      text {
        font-size: 24rpx;
        color: #666666;
      }
      
      &.active text {
        color: #667eea;
        font-weight: bold;
      }
    }
  }
  
  .amount-confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40rpx;
    
    .confirm-text {
      font-size: 28rpx;
      color: #666666;
      margin-right: 10rpx;
    }
    
    .confirm-amount {
      font-size: 36rpx;
      font-weight: bold;
      color: #ff6b35;
    }
  }
  
  .confirm-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: bold;
    
    &:disabled {
      background: #cccccc;
    }
  }
}

.payment-proof {
  margin-top: 40rpx;
  
  .proof-header {
    margin-bottom: 30rpx;
    
    .proof-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .proof-desc {
      font-size: 24rpx;
      color: #999999;
    }
  }
  
  .proof-upload {
    .upload-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      margin-bottom: 20rpx;
      
      .upload-item {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        
        image {
          width: 100%;
          height: 100%;
          border-radius: 12rpx;
          object-fit: cover;
          background-color: #f5f5f5;
        }
        
        .delete-btn {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          width: 40rpx;
          height: 40rpx;
          background-color: #ff4444;
          color: #ffffff;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
          font-weight: bold;
        }
      }
      
      .upload-btn, .test-btn {
        width: 160rpx;
        height: 160rpx;
        border: 2rpx dashed #cccccc;
        border-radius: 12rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fafafa;
        
        .upload-icon, .test-icon {
          font-size: 48rpx;
          margin-bottom: 10rpx;
        }
        
        text {
          font-size: 24rpx;
          color: #666666;
        }
      }
      
      .test-btn {
        border-color: #4caf50;
        background-color: rgba(76, 175, 80, 0.05);
        
        text {
          color: #4caf50;
        }
      }
    }
    
    .upload-tips {
      background-color: #f8f9fa;
      padding: 20rpx;
      border-radius: 8rpx;
      margin-bottom: 30rpx;
      
      text {
        display: block;
        font-size: 22rpx;
        color: #666666;
        line-height: 1.5;
        margin-bottom: 6rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .payment-note {
    .note-label {
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
      display: block;
      margin-bottom: 15rpx;
    }
    
    .note-input {
      width: 100%;
      height: 120rpx;
      padding: 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #333333;
      background-color: #ffffff;
      resize: none;
      
      &:focus {
        border-color: #667eea;
      }
    }
    
    .note-count {
      text-align: right;
      font-size: 22rpx;
      color: #999999;
      margin-top: 8rpx;
    }
  }
}

.payment-success {
  background-color: #ffffff;
  margin: 20rpx 40rpx;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .success-icon {
    font-size: 120rpx;
    margin-bottom: 30rpx;
  }
  
  .success-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #4caf50;
    display: block;
    margin-bottom: 15rpx;
  }
  
  .success-desc {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.5;
    display: block;
    margin-bottom: 40rpx;
  }
  
  .success-info {
    background-color: #f8f9fa;
    border-radius: 12rpx;
    padding: 30rpx;
    
    text {
      display: block;
      font-size: 26rpx;
      color: #666666;
      line-height: 1.6;
      margin-bottom: 8rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  .proof-display {
    margin-top: 30rpx;
    
    .proof-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20rpx;
    }
    
    .proof-images {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
      
      .proof-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        object-fit: cover;
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 30rpx 40rpx;
  display: flex;
  gap: 20rpx;
  border-top: 2rpx solid #f0f0f0;
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    border: none;
    
    &.secondary {
      background-color: #f5f5f5;
      color: #666666;
    }
    
    &.primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #ffffff;
    }
  }
}
</style> 